<template>
    <div >
        <!--顶部-->
        <div id="head">
            <div id="headbox">
                <div id="headtop"><!--上部分-->
                    <img src="../image/store/4e708671b1c5c264.png" alt="">
                    <div id="headtopRight">
                        <p>
                            <span>沃尔玛-新街口店</span>
                            <I></I>
                        </p>
                        <p>达达专送  ·60分钟</p>
                        <p>基础运费4元</p>
                    </div>                   
                </div>
                <div id="headtopBotton"><!--下部分-->
                    <p id="headtopBottonLeft">
                        <span>满减</span>
                        <span>联合利华洗护满88减12</span>
                    </p>
                    <p id="headtopBottonRight">
                        <span>13种优惠</span>
                        <span></span>
                    </p>
                </div>
            </div>
        </div>
        <!--搜索框-->
        <div id="search">
            <div id="searchbox">
                <span></span>
                <input type="text" placeholder="搜索店内商品，共2271件好物">
                <span></span>
            </div>
        </div>
        <!--图片-->
        <div id="img">
            <div>
                <img src="../image/store/85d279d50be173cb.png" alt="">
            </div>
        </div>
        <!--购物车-->        
        <div id="shop">
            <div id="left">
                <ul>
                    <li @click="active=ctg.id" v-for="ctg in shopctgs" :key="ctg.id">
                        <span>{{ctg.text}}</span>
                        <ul :style="{display:ctg.id==active?'':'none'}">
                            <li v-for="subctg in ctg.children" :key="subctg.id">
                                <span>{{subctg.text}}</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div id="right">
                <ul>
                    <li id="li1">
                        <span>秒杀(159)</span>
                        <span>销量</span>
                        <span>价格
                            <i></i>
                        </span>
                    </li>
                    <li v-for="gs in goods" :key="gs.id" id="li2">
                        <img :src="imgURL+gs.thumb" alt="">
                        <nav>
                            <p>{{gs.title}}</p>
                            <p>
                                <span>月售99件 </span>
                                <span> 好评100%</span>
                            </p>
                            <p>
                                <span id="kill1">秒杀5.31折</span>
                            </p>
                            <nav id="btm">
                                <p>
                                    <span>￥{{gs.sprice}}</span>
                                    <span>￥{{gs.price}}</span>
                                </p>
                                <p>
                                    <span v-if="gs.num" id="span">
                                        <button id="btn1" @click="jian(gs)">-</button>
                                        <span>{{gs.num}}</span>
                                    </span>
                                    <button id="btn2" @click="add(gs)">+</button>
                                </p>                          
                            </nav>                        
                        </nav> 
                    </li>
                </ul>
            </div>
        </div>
        <SideNavigation></SideNavigation>
        <Car :shopid="shop_id" active="img_id"></Car>
    </div>
</template>
<script>
    import Car from '@/components/Car';
    export default {
        props:['shop_id','img_id'],
        components:{Car},
        data(){
            return {
                shopctgs:[],
                goods:[],
                active:'',
            }
        },
        created(){
            this.getshopctgs()
            this.getGoods()
            //this.cars[this.shop_id]={}  购物车初始化
            this.$set(this.cars,this.shop_id,{}) //购物车初始化
        },
        methods:{
            getshopctgs(){
                this.axios.get('/shopctgs').then((ret)=>{
                    let{data,error}=ret.data
                    this.shopctgs=data
                })
            },
            getGoods(){
                this.axios.get('/goods').then((ret)=>{
                    let{data,error}=ret.data
                    this.goods=data
                })
            },
            add(goods){
                //this.cars[this.shop_id][goods.id]=goods
                this.$set(this.cars[this.shop_id],goods.id,goods)
                if(!this.cars[this.shop_id][goods.id].num){
                    //this.cars[this.shop_id][goods.id].num=1
                    this.$set(this.cars[this.shop_id][goods.id],'num',1)
                }else{
                    if(this.cars[this.shop_id][goods.id].num<this.cars[this.shop_id][goods.id].stotes){
                        this.cars[this.shop_id][goods.id].num++
                    }
                    
                }
                console.log(this.cars,this.$root.cars)
            },
            jian(goods){
               goods.num--;
               if(goods.num==0){
                   this.$delete(this.cars[this.shop_id],goods.id)
               }
           }
        }
    }
</script>
<style scoped lang="scss">
*{
    margin:0;
    padding:0;
    list-style-type:none;
    text-decoration:none;
}
//顶部 
    #head{
        width:750px;
        height:232px;
        padding-top:16px;

        //顶部box
        #headbox{
            width:710px;
            height:198px;
            padding:4px 20px 30px 20px;

            #headtop{
                width:710px;
                height:140px;
                margin-bottom:30px;
                display:flex;
                justify-content:space-between;
                //左边的图片
                img{
                    display:block;
                    width:136px;
                    height:136px;
                    padding:0 2px;
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                }
                //右边的文字
                #headtopRight{
                   width:554px;
                   height:140px;
                
                    //第一层
                    P:nth-of-type(1){
                       width:570px;
                       height:62px;
                       display:flex;

                        span{
                            font-size:35px;
                            font-weight:550;
                            color:#222;
                            width:494px;
                            height:62px;
                            display:block;
                        }
                        i{
                            display:block;
                            width:60px;
                            height:60px;
                            background-image:url(../image/store/focus.png);
                            background-repeat:no-repeat;
                            background-size:146px auto;
                        }
                   }
                   //第二层
                    P:nth-of-type(2){
                        width:418px;
                        height:30px;
                        padding-right:136px;
                        margin-bottom:18px;
                        font-size:24px;
                        line-height:30px;
                    }
                    //第三层
                    P:nth-of-type(3){
                        width:418px;
                        height:30px;
                        padding-right:136px;
                        font-size:24px;
                        line-height:30px;
                    }
                }
            }
        }
        //头部底部部分
        #headtopBotton{
            width:710px;
            height:28px;
            margin-top:20px;
            display:flex;
            
            //左边
            #headtopBottonLeft{
                width:320px;
                height:28px;
                display:flex;

                span:nth-of-type(1){
                    display:block;
                    width:50px;
                    height:28px;
                    background-color:#55D85E;
                    color:#fff;
                    font-size:24px;
                    text-align:center;
                    line-height:28px;
                    border-radius:5px 2px;
                    white-space:nowrap;
                }
                span:nth-of-type(2){
                    display:block;
                    width:260px;
                    height:28px;
                    margin-left:10px;
                    line-height:28px;
                    font-size:24px;
                    color:#666;
                    white-space:nowrap;
                }
            }
            //右边
            #headtopBottonRight{
                width:414px;
                height:28px;
                display:flex;
                justify-content:flex-end;
                
                span:nth-of-type(1){
                    width:120px;
                    height:28px;
                    display:block;
                    font-size:24px; 
                    color:#666;                 
                }
                span:nth-of-type(2){
                    width:20px;
                    height:11px;
                    margin:10px 0 0 5px;
                    display:block;
                    background-image:url(../image/home/icon_arrow_down.png);
                    background-repeat:no-repeat;
                    background-size:100% 100%; 
                }
            }
        }
    }
//搜索框
    #search{
        width:750px;
        height:80px;

        #searchbox{
            width:710px;
            height:50px;
            padding:10px 20px 20px 20px;
            position:relative;

            input{
                width:616px;
                height:60px;
                display:block;
                border:none;
                border-radius:50px;
                outline:0;
                background-color:rgb(243, 240, 240);
                font-size:30px;
                line-height:60px;
                text-indent:54px;
            }
            input::-webkit-input-placeholder{
                color:#999;
            }
            input::-moz-placeholder{   /* Mozilla Firefox 19+ */
                color:#999;
            }
            input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
                color:#999;
            }
            input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
                color:#999;
            }

            span:nth-of-type(1){
                display:block;
                width:28px;
                height:32px;
                background-image:url(../image/home/icon_swich.png);
                background-repeat:no-repeat;
                background-size:100% 100%;
                position: absolute;
                top:25px;
                left:40px;
            }
             span:nth-of-type(2){
                 display:block;
                 width:94px;
                 height:60px;
                 background-image:url(../image/store/groupCopy.png);
                 background-repeat:no-repeat;
                 background-size:100% 100%;
                 position: absolute;
                 right:20px;
                 bottom:5px;
             }
        }
    }
//图片
    #img{
        width:750px;
        height:248px;
        background-color:#fff;
        position: relative;
        z-index: 100;

       div{
           width:710px;
           height:228px;
           padding:0 20px 20px 20px;

            img{
                display:block;
                width:710px;
                height:236px;
                margin:auto;
                background-repeat:no-repeat;
                background-size:100% 100%;
            }
       }
    }
//购物车
    #shop div{
        position: absolute;
        top:575px;
        bottom:0;  
        overflow-y:auto; 
    }
    #shop{
        width:750px;

        #left{
            width:160px;        
        
            li{
                display:block;
                width:112px;
                //height:92px;
                padding:4px 24px;
                font-size:28px;
                line-height:92px;
                color:#666;
                background-color:rgb(245, 245, 245);
                white-space:nowrap;
                cursor:pointer;
                
            }
        }
        #right{
            left:160px;//固定定位
            right:0;
            

            #li1{
                display:block;
                width:570px;
                height:60px;
                display:flex;
                padding:0 0 10px 10px;
                position: fixed;
                z-index: 100;
                background-color:#fff;
                border:1px solid #fff;

                span{
                    font-size:24px;
                    color:#666;
                    display:block;
                    height:60px;
                }
                //秒杀
                span:nth-of-type(1){
                    width:400px;
                    line-height:60px;                        
                }
                //销量
                span:nth-of-type(2){
                    font-weight:540;
                    width:76px;
                    line-height:60px;
                    text-align:center;
                    margin-right:15px;
                }
                //价格
                span:nth-of-type(3){
                    width:94px;
                    line-height:60px;
                    text-align:right;
                    display:flex;
                //价格后面的上下箭头
                    i{
                        display:block;
                        width:14px;
                        height:20px;
                        background-image:url(../image/store/normal_price.png);
                        background-repeat:no-repeat;
                        background-size:100% 100%;
                        margin:23px 0 0 5px;
                    }
                }
            }

        #li2{
            display:block;
            width:570px;
            height:200px;
            display:flex;
            padding-top:100px;

            //左边的图片
            img{
                display:flex;
                width:130px;
                height:130px;
                background-repeat:no-repeat;
                background-size:100% 100%;
            }
             //右边的信息
            
            nav{
                width:410px;
                height:210px;
                white-space:nowrap;
                                
                //商品名称
                p:nth-of-type(1){
                    width:400px;
                    height:40px;
                    padding-left:10px;
                    font-size:30px;
                    font-weight:600;
                    color:#333;
                    overflow: hidden;
                    }
                //销量和评价
                p:nth-of-type(2){
                    width:400px;
                    height:28px;
                    padding:10px 0 0 10px;
                    display:flex;

                        span{
                            width:112px;
                            height:28px;
                            display:block;
                            font-size:24px;
                            color:#999;
                            white-space:nowrap;
                            margin-right:20px;
                        } 
                    }
                //秒杀框
                p:nth-of-type(3){
                    width:400px;
                    height:38px;
                    padding:10px 0 0 10px;

                    span{
                        display:block;
                        width:130px;
                        height:28px;
                        border-radius:5px 2px;
                        color:#fff;
                        font-size:24px;
                        text-align:center;
                        line-height:28px;
                    }
                    #kill1{
                        background-color:#FF7D7D;
                    }
                    #drop1{
                        background-color:#FFC837;
                    }
                }
                                
                //价格和按钮
                #btm{
                    width:500px;
                    height:74px;
                    padding:10px 0 0 0;
                    display:flex;

                    //价格
                    p:nth-of-type(1){
                        width:240px;
                        height:74px;


                        span{
                            width:200px;
                            display:block;
                            font-weight: normal;
                        }
                        span:nth-of-type(1){                                        
                            height:44px;                                       
                            font-size:36px;
                            color:#FF7D7D;                                        
                        }
                        span:nth-of-type(2){                                        
                            height:30px;                                        
                            font-size:24px;
                            color:#999;                                       
                            text-decoration:line-through;
                        }
                    }

                    //按钮
                    p:nth-of-type(2){
                        width:200px;
                        height:56px;
                        display:flex;
                        position: relative;

                        //左边减的按钮
                        #span{
                            display:flex;
                            text-align:right;
                            margin:0;

                            #btn1{
                                color:rgba(0,203,30,1);
                                background-color:#fff;
                                border:1px solid rgba(0,203,30,1);
                            }
                            span{
                                width:60px;
                                height:56px;
                                line-height:56px;
                                display:block;
                                text-align: center;
                                margin:0;
                                font-size:32px;
                            }
                        }
                        button{
                            display:block;
                            width:56px;
                            height:56px;
                            border-radius:50px;
                            font-size:50px;
                            border:0;
                            outline:none;
                            line-height:0px;
                        }
                        #btn2{
                            color:#fff;
                            background-color:rgba(0,203,30,1);
                            position:absolute;
                            left:120px;
                        }                                                                      
                    }                                   
                }
            }
        }                    
    }
}
</style>

